<script type="text/x-template" id="my-resume">
	<el-collapse v-model="activeNames">
		<el-collapse-item name="myResume">
			<template slot="title" class="clearfix">
				<el-tag effect="plain">流程履历</el-tag>
				<el-button size="small" icon="el-icon-picture-outline" type="primary" plain
				           v-show="!diagramLoading && index === diagramList.length - 1"
				           v-for="(item, index) in diagramList"
				           @click.stop="openDiagram(item)">
					{{item.name}}
				</el-button>
			</template>
			<el-card class="box-card" shadow="hover">
				<el-steps v-if="!loading" direction="vertical" v-bind="$props" :active="resumeList.length"
				          :align-center="true">
					<el-step v-for="(item, index) in resumeList" :key="index" :status="getStatus(item.processType)">
						<div slot="title">{{item.processNodeName}}</div>
						<div slot="description" :style="item.processType==='next'?{color: 'black'}:{}">
							<el-card shadow="hover">
								<div>
									处置时间：{{item.handleDate}}
									<el-divider direction="vertical"></el-divider>
									<span v-if="!!item.timeShow">处置耗时：【{{item.timeShow}}】</span>
								</div>
								<div>{{item.handleInfo}}</div>
							</el-card>
						</div>
					</el-step>
				</el-steps>
				<div v-else>
					<i class="el-icon-loading"></i> 履历列表加载中
				</div>
			</el-card>
		</el-collapse-item>
	</el-collapse>
</script>
<script>
	(function () {
		var props = Object.assign({
			masterId: String
		}, Vue.options.components.ElSteps.options.props);

		Vue.component('my-resume', {
			template: '#my-resume',
			props: props,
			data() {
				return {
					loading: false,
					diagramLoading: false,
					getResumeListUrl: my.base + '/silly/resume/resumeList/',
					getDiagramListUrl: null,
					resumeList: [],
					diagramList: [],
					activeNames:['myResume']
				}
			},
			methods: {
				init() {
					this.getResumeList(this.masterId);
					this.getDiagramList(this.masterId);
				},
				getStatus(type) {
					switch (type) {
						case 'next':
							return 'finish';
						case 'back':
							return 'error';
						case 'flow':
							return 'wait';
						case 'start':
							return 'process';
						case 'close':
							return 'success';
						default:
							return null;
					}
				},
				getResumeList(masterId) {
					var that = this;
					if (!masterId) {
						return;
					}
					that.loading = true;
					setTimeout(function () {
						my.http.get(that.getResumeListUrl + masterId).then(function (data) {
							if (data.code === 0 && data.data) {
								that.resumeList = data.data.map(x => {
									x.timeShow = dateUtil.timeShow(x.consumeTime);
									return x;
								});
							}
							that.loading = false;
						}).catch(function (err) {
							that.$notify({
								title: '失败',
								message: err,
								type: 'warning'
							});
							that.loading = false;
						});
					}, 50)
				},
				getDiagramList(masterId) {
					var that = this;
					if (!masterId) {
						return;
					}
					that.diagramLoading = true;
					setTimeout(function () {
						my.http.get(that.getDiagramListUrl + masterId).then(function (data) {
							if (data.code === 0 && data.data) {
								that.diagramList = data.data;
							}
							that.diagramLoading = false;
						}).catch(function (err) {
							that.$notify({
								title: '失败',
								message: err,
								type: 'warning'
							});
							that.diagramLoading = false;
						});
					}, 50)
				},
				openDiagram(item) {
					myUtil.loadForm({
						url: '/common/my-diagram.html',
						useTempDom: true,
						thenFunc: (formVue) => {
							formVue.open({
								processDefinitionId: item.processDefinitionId,
								processInstanceId: item.processInstanceId
							});
						}
					});

				}
			},
			created() {
				this.init()
			}
		});

	})()
</script>



